<template>
  <view class="viewport">
    <!-- #ifndef MP-TOUTIAO -->
    <!-- 自定义导航栏 -->
    <uni-nav-bar class="uni-nav-bar" background-color="rgba(255,255,255,0)" :border="false" :statusBar="true"
      @clickLeft="goBack">
      <template #left>
        <view class="icon-arrow-left"></view>
      </template>
      <template #default>
        <view class="title">新规资料</view>
      </template>
    </uni-nav-bar>
    <!-- #endif -->
    <!-- 抖音小程序顶部导航 -->
    <!-- #ifdef MP-TOUTIAO -->
    <view class="toutiao-nav-bar">
      <view class="status-bar"></view>
      <view class="title-container">
        <view class="title">新规资料</view>
      </view>
    </view>
    <!-- #endif -->

    <scroll-view class="scroll-view" scroll-y>
      <view class="new-regulation-infos">
        <view class="new-regulation-info" v-for="(item, index) in newRegulationInfoList" :key="index"
          @tap="openPdfPreview(item.path!)">
          <text class="title">{{ item.title }}</text>
          <text class="icon-right"></text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import type { NewRegulationInfoVo } from '@/api/base/types'
  import { useBaseInfo } from '@/composables/LearnBase'
  import { getNewRegulationInfoListApi } from '@/api/base'
  // #ifdef MP
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  // #endif
  // #ifdef MP-TOUTIAO
  // 获取小程序下胶囊按钮的布局位置信息
  // 上边界坐标，单位：px
  let top = (menuButtonInfo.top - 10) + 'px'
  const statusBarHeight = ref(top)
  // 高度，单位：px
  let height = (menuButtonInfo.height + 20) + 'px'
  const titleHeight = ref(height)
  // #endif
  // 题库信息
  const baseInfo = useBaseInfo()
  // 新规资料
  const newRegulationInfoList = ref<NewRegulationInfoVo[]>([])
  // 调用接口获取新规资料
  const getNewRegulationInfoList = async () => {
    let result = await getNewRegulationInfoListApi(baseInfo.driveType!, baseInfo.examReason!)
    newRegulationInfoList.value = result.data
  }

  onLoad(async (options: any) => {
    uni.showLoading({
      title: '数据加载中',
    })
    await getNewRegulationInfoList()
    uni.hideLoading()
  })

  /**
   * PDF文件预览
   */
  const openPdfPreview = (filePath: string) => {
    // // #ifdef MP-WEIXIN || H5
    // previewWechat(filePath)
    // // #endif
    // // #ifdef APP || MP-TOUTIAO
    // uni.navigateTo({
    //   url: `/pagesFile/filePreview/filePreview?filePath=${filePath}`,
    // })
    // // #endif
    previewWechat(filePath)
  }

  //微信小程序预览文档,可预览.doc,.docx,.xls,.xlsx,.pdf等文件
  const previewWechat = (urlPdf: string) => {
    uni.showLoading({
      title: '正在加载中..'
    })
    uni.downloadFile({
      url: urlPdf,
      success: function (res) {
        var filePath = res.tempFilePath;
        uni.openDocument({
          filePath: filePath,
          showMenu: true,
          success: function (res) {
            console.log('打开文档成功');
            uni.hideLoading()
          },
        });
      },
      complete: function (r) {
        uni.hideLoading()
      }
    })
  }

  //退出
  const goBack = () => {
    uni.navigateBack()
  }
</script>

<style lang="scss" scoped>
  .viewport {
    display: flex;
    flex-direction: column;
    padding: 0 20rpx;
    height: 100%;
    background-image: linear-gradient(180deg,
        #d0ffe7 0%,
        #f8f8f8 30%,
        #ffffff 100%),
      linear-gradient(180deg,
        #f8f8f8 0%,
        #ffffff 100%);
  }

  .uni-nav-bar {
    .icon-arrow-left {
      font-weight: bold;
    }

    .title {
      align-self: center;
      flex: 1;
      text-align: center;
      font-size: 32rpx;
      font-weight: bold;
    }
  }

  /* #ifdef MP-TOUTIAO */
  // 抖音自定义导航栏
  .toutiao-nav-bar {

    // 顶部占位
    .status-bar {
      width: 100vw;
      height: v-bind(statusBarHeight);
    }

    // 标题行
    .title-container {
      display: flex;
      flex-direction: row;
      align-items: center;
      // justify-content: center;
      height: v-bind(titleHeight);

      .title {
        margin-left: 82rpx;
        font-size: 32rpx;
        // font-weight: bold;
      }
    }
  }

  /* #endif */

  .scroll-view {
    display: flex;
    flex-direction: column;
  }

  // 新规资料
  .new-regulation-infos {
    margin-top: 20rpx;
    padding: 30rpx 10rpx 30rpx 30rpx;
    background-color: #ffffff;

    border-radius: 10rpx 10rpx 0 0;

    .new-regulation-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 90rpx;
      border-bottom: dotted 1rpx #c0c0c0;

      .title {
        display: flex;
        font-size: 28rpx;
        color: #25261d;

        &::before {
          margin-right: 10rpx;
          content: '';
          background-image: url('@/pagesFile/static/images/new_regulation_infos/file_icon.png');
          width: 37rpx;
          background-size: 37rpx auto;
        }
      }

      .icon-right {
        color: #bdbdbd;
      }
    }
  }

</style>
